<template>
    <view>
		<cu-custom :bgColor="NavBarColor" :isBack="true">
			<block slot="backText">返回</block>
			<!-- <block slot="content">巡检中...</block> -->
			<block slot="right" ><view  @tap.stop="goAdd()">新增</view></block> 
		</cu-custom>
		<map 
		style="width: 100%; height:690px;" 
		:latitude="latitude" 
		:longitude="longitude" 
		:markers="marker"
		:polyline="polyline"
		:circles="circles"
		:scale="scale"
		:key="menuKey"
		v-if="hackReset"
		>
		</map>
    </view>
	
</template>

<script>
	export default {
	    data() {
	        return {
				menuKey:1,
				NavBarColor:this.NavBarColor,
	            id:0, // 使用 marker点击事件 需要填写id
	            title: 'map',
	          　latitude: '',  //纬度
		　　    longitude: '',  //经度
		       timer: null,
			   showa: true,
			   showc: false,
			    hackReset: true,
			   g_wakelock:null,
			    rpoints: [],
				arate: 60,
			   annotation:{
			   	id:"",
			   	routeId:""	   
			   },
			   begAnnotation:{
				userId:"",
				routeId:""
			   },
		  　　　marker: [{
			   　　id:0,
			   　　latitude: '',//纬度
			   　　longitude: '',//经度
			   　　iconPath: '/static/mar.png',    //显示的图标        
			   　　rotate:0,   // 旋转度数
			   　　width:20,   //宽
			   　　height:20,   //高
			  　　 title:'你在哪了',//标注点名
			  　　 alpha:0.5,   //透明度
			   callout:{//自定义标记点上方的气泡窗口 点击有效  
			   　　content:'',//文本
			   　　color:'#ffffff',//文字颜色
			   　　fontSize:14,//文本大小
			   　　borderRadius:2,//边框圆角
			  　　 bgColor:'#00c16f',//背景颜色
			   　　display:'ALWAYS'//常显 
			   }						
		   },{
			   　　id:0,
			   　　latitude: '',//纬度
			   　　longitude: '',//经度
			   　　iconPath: '/static/qi.png',    //显示的图标        
			   　　rotate:0,   // 旋转度数
			   　　width:20,   //宽
			   　　height:20,   //高
			  　　 title:'你在哪了',//标注点名
			  　　 alpha:0.5	
		   },{
			   　　id:0,
			   　　latitude: '',//纬度
			   　　longitude: '',//经度
			   　　iconPath: '/static/bq.png',    //显示的图标        
			   　　rotate:0,   // 旋转度数
			   　　width:20,   //宽
			   　　height:20,   //高
			  　　 title:'你在哪了',//标注点名
			  　　 alpha:0.5	
		   },{
			   　　id:0,
			   　　latitude: '',//纬度
			   　　longitude: '',//经度
			   　　iconPath: '/static/bz.png',    //显示的图标        
			   　　rotate:0,   // 旋转度数
			   　　width:20,   //宽
			   　　height:20,   //高
			  　　 title:'你在哪了',//标注点名
			  　　 alpha:0.5	
		   }],
		   scale:14,
		   polyline: [{ //添加polyline数组，设置要连接的点（从数组的第一项连接到最后一项），这里只设置连接两个点，演示下
		              points: [],
		                  color: "#FF0000", //设置连接的线的颜色
		                   width: 10, //线的宽度
		                   dottedLine: true, //线是否是虚线
		                   arrowLine: true,//线是带箭头的线，开发者工具暂时不支持
		              },{ //添加polyline数组，设置要连接的点（从数组的第一项连接到最后一项），这里只设置连接两个点，演示下
		              points: [],
		                  color: "#0000E3", //设置连接的线的颜色
		                   width: 10, //线的宽度
		                   dottedLine: true, //线是否是虚线
		                   arrowLine: true,//线是带箭头的线，开发者工具暂时不支持
		              },{ //添加polyline数组，设置要连接的点（从数组的第一项连接到最后一项），这里只设置连接两个点，演示下
		              points: [],
		                  color: "#0000E3", //设置连接的线的颜色
		                   width: 10, //线的宽度
		                   dottedLine: true, //线是否是虚线
		                   arrowLine: true,//线是带箭头的线，开发者工具暂时不支持
		              },{ //添加polyline数组，设置要连接的点（从数组的第一项连接到最后一项），这里只设置连接两个点，演示下
		              points: [],
		                  color: "#0000E3", //设置连接的线的颜色
		                   width: 10, //线的宽度
		                   dottedLine: true, //线是否是虚线
		                   arrowLine: true,//线是带箭头的线，开发者工具暂时不支持
		              },{ //添加polyline数组，设置要连接的点（从数组的第一项连接到最后一项），这里只设置连接两个点，演示下
		              points: [],
		                  color: "#0000E3", //设置连接的线的颜色
		                   width: 10, //线的宽度
		                   dottedLine: true, //线是否是虚线
		                   arrowLine: true,//线是带箭头的线，开发者工具暂时不支持
		              },{ //添加polyline数组，设置要连接的点（从数组的第一项连接到最后一项），这里只设置连接两个点，演示下
		              points: [],
		                  color: "#0000E3", //设置连接的线的颜色
		                   width: 10, //线的宽度
		                   dottedLine: true, //线是否是虚线
		                   arrowLine: true,//线是带箭头的线，开发者工具暂时不支持
		              },{ //添加polyline数组，设置要连接的点（从数组的第一项连接到最后一项），这里只设置连接两个点，演示下
		              points: [],
		                  color: "#0000E3", //设置连接的线的颜色
		                   width: 10, //线的宽度
		                   dottedLine: true, //线是否是虚线
		                   arrowLine: true,//线是带箭头的线，开发者工具暂时不支持
		              },{ //添加polyline数组，设置要连接的点（从数组的第一项连接到最后一项），这里只设置连接两个点，演示下
		              points: [],
		                  color: "#0000E3", //设置连接的线的颜色
		                   width: 10, //线的宽度
		                   dottedLine: true, //线是否是虚线
		                   arrowLine: true,//线是带箭头的线，开发者工具暂时不支持
		              },{ //添加polyline数组，设置要连接的点（从数组的第一项连接到最后一项），这里只设置连接两个点，演示下
		              points: [],
		                  color: "#0000E3", //设置连接的线的颜色
		                   width: 10, //线的宽度
		                   dottedLine: true, //线是否是虚线
		                   arrowLine: true,//线是带箭头的线，开发者工具暂时不支持
		              },{ //添加polyline数组，设置要连接的点（从数组的第一项连接到最后一项），这里只设置连接两个点，演示下
		              points: [],
		                  color: "#0000E3", //设置连接的线的颜色
		                   width: 10, //线的宽度
		                   dottedLine: true, //线是否是虚线
		                   arrowLine: true,//线是带箭头的线，开发者工具暂时不支持
		              },{ //添加polyline数组，设置要连接的点（从数组的第一项连接到最后一项），这里只设置连接两个点，演示下
		              points: [],
		                  color: "#0000E3", //设置连接的线的颜色
		                   width: 10, //线的宽度
		                   dottedLine: true, //线是否是虚线
		                   arrowLine: true,//线是带箭头的线，开发者工具暂时不支持
		              },{ //添加polyline数组，设置要连接的点（从数组的第一项连接到最后一项），这里只设置连接两个点，演示下
		              points: [],
		                  color: "#0000E3", //设置连接的线的颜色
		                   width: 10, //线的宽度
		                   dottedLine: true, //线是否是虚线
		                   arrowLine: true,//线是带箭头的线，开发者工具暂时不支持
		              },{ //添加polyline数组，设置要连接的点（从数组的第一项连接到最后一项），这里只设置连接两个点，演示下
		              points: [],
		                  color: "#0000E3", //设置连接的线的颜色
		                   width: 10, //线的宽度
		                   dottedLine: true, //线是否是虚线
		                   arrowLine: true,//线是带箭头的线，开发者工具暂时不支持
		              },{ //添加polyline数组，设置要连接的点（从数组的第一项连接到最后一项），这里只设置连接两个点，演示下
		              points: [],
		                  color: "#0000E3", //设置连接的线的颜色
		                   width: 10, //线的宽度
		                   dottedLine: true, //线是否是虚线
		                   arrowLine: true,//线是带箭头的线，开发者工具暂时不支持
		              },{ //添加polyline数组，设置要连接的点（从数组的第一项连接到最后一项），这里只设置连接两个点，演示下
		              points: [],
		                  color: "#0000E3", //设置连接的线的颜色
		                   width: 10, //线的宽度
		                   dottedLine: true, //线是否是虚线
		                   arrowLine: true,//线是带箭头的线，开发者工具暂时不支持
		              },{ //添加polyline数组，设置要连接的点（从数组的第一项连接到最后一项），这里只设置连接两个点，演示下
		              points: [],
		                  color: "#0000E3", //设置连接的线的颜色
		                   width: 10, //线的宽度
		                   dottedLine: true, //线是否是虚线
		                   arrowLine: true,//线是带箭头的线，开发者工具暂时不支持
		              },{ //添加polyline数组，设置要连接的点（从数组的第一项连接到最后一项），这里只设置连接两个点，演示下
		              points: [],
		                  color: "#0000E3", //设置连接的线的颜色
		                   width: 10, //线的宽度
		                   dottedLine: true, //线是否是虚线
		                   arrowLine: true,//线是带箭头的线，开发者工具暂时不支持
		              },{ //添加polyline数组，设置要连接的点（从数组的第一项连接到最后一项），这里只设置连接两个点，演示下
		              points: [],
		                  color: "#0000E3", //设置连接的线的颜色
		                   width: 10, //线的宽度
		                   dottedLine: true, //线是否是虚线
		                   arrowLine: true,//线是带箭头的线，开发者工具暂时不支持
		              },{ //添加polyline数组，设置要连接的点（从数组的第一项连接到最后一项），这里只设置连接两个点，演示下
		              points: [],
		                  color: "#0000E3", //设置连接的线的颜色
		                   width: 10, //线的宽度
		                   dottedLine: true, //线是否是虚线
		                   arrowLine: true,//线是带箭头的线，开发者工具暂时不支持
		              },{ //添加polyline数组，设置要连接的点（从数组的第一项连接到最后一项），这里只设置连接两个点，演示下
		              points: [],
		                  color: "#0000E3", //设置连接的线的颜色
		                   width: 10, //线的宽度
		                   dottedLine: true, //线是否是虚线
		                   arrowLine: true,//线是带箭头的线，开发者工具暂时不支持
		              },{ //添加polyline数组，设置要连接的点（从数组的第一项连接到最后一项），这里只设置连接两个点，演示下
		              points: [],
		                  color: "#0000E3", //设置连接的线的颜色
		                   width: 10, //线的宽度
		                   dottedLine: true, //线是否是虚线
		                   arrowLine: true,//线是带箭头的线，开发者工具暂时不支持
		              }],
	   　 circles:[{//在地图上显示圆
		  　　latitude: '',
		  　　longitude: '',
		  　　radius:400,//半径
		      fillColor:"#ffffffAA",//填充颜色
		  　　color:"#55aaffAA",//描边的颜色
		 　　 strokeWidth:1//描边的宽度
		  }], 
	     }
	    },
		onLoad: function (option) {
			var that=this;
			
			this.$http.get("/api/v1/appbusiness/two/getTaskNew",{params:{userNane:''}}).then(res=>{
						this.annotation.id =res.data.id
						this.annotation.routeId =res.data.routeId
						
						console.log("~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~用户id和基准路线id",this.annotation.id,this.annotation.routeId);
					
						this.getLocation();
						this.getRoute();//获取基准路线
						this.$http.get("/api/v1/appbusiness/two/getConfig",{params:{}}).then(res=>{
									if (res.data.success){
										console.log(res.data.result.arate)
										that.arate=res.data.result.arate
										this.timer = setInterval( () => {
											console.log("开始定时任务");
										    // 同上	
										   this.getLocation();
										  
										}, that.arate*1000) 																			
						           }else{
									this.timer = setInterval( () => {
										console.log("开始定时任务");
									    // 同上	
									   this.getLocation();
									  
									}, that.arate*1000) 	   
								   }		   			
						})
						
			})


			

		},
		onUnload() {
			if(this.timer) {  
				clearInterval(this.timer);  
				this.timer = null;  
			}  
		},
	    methods: {
			goAdd(){ 
				uni.navigateTo({
					url: '/pages/common/emergencyadd?item='+ '123'
				});
			},
			getLocation(){
				var that=this;
				uni.getLocation({
				    type: 'GCJ02', //WGS84 国际坐标系 火星坐标系 这里用的是高德地图 所以用GCJ02
				    success: function (res) {
						that.marker[0].longitude= res.longitude;
						that.marker[0].latitude = res.latitude;
						that.circles[0].longitude= res.longitude;
						that.circles[0].latitude = res.latitude;
						that.longitude= res.longitude;
						that.latitude = res.latitude;
						
				        console.log('当前位置的经度：' + res.longitude);
				        console.log('当前位置的纬度：' + res.latitude);
						var address='';
						var point = new plus.maps.Point(res.longitude, res.latitude);
						      
								plus.maps.Map.reverseGeocode(
									point,
									{},
									function(event) {
										var address = event.address; // 转换后的地理位置
										var point = event.coord; // 转换后的坐标信息
										var coordType = event.coordType; // 转换后的坐标系类型
										that.marker[0].callout.content = address;
										
										that.getRouteNew(res.longitude,res.latitude,address);  //把数据录入到数据库										
										
									},
									function(e) {}
						);
						
				    },
					fail: function (res) {
						 console.log('当前位置的经度');
					}	
				});
			},
			getRoute(){
				var that=this;
				this.$http.get("/api/v1/appbusiness/two/getRoute",{params:{routeId:this.annotation.routeId}}).then(res=>{
					console.log("1265");
							if (res.data.success){
								if(res.data.result.type==2){
									console.log("1234556");
									let data =res.data.result.list;
									data.forEach((item,index)=>{    //js遍历数组
									   console.log(item);
						                let ind=index+1;
									   
										 that.polyline[ind].points=item  
									   
									   
									});
								}else{
									that.rpoints=res.data.result.list;
									that.polyline[1].points=res.data.result.list
									that.marker[2].longitude= res.data.result.blo;
									that.marker[2].latitude = res.data.result.bla;
									that.marker[3].longitude= res.data.result.elo;
									that.marker[3].latitude = res.data.result.ela;
								}
							    												
			               }			   			
				})
			},
			 //把数据录入到数据库
			getRouteNew(longitude,latitude,address){
				var that=this;
				that.$http.get("/api/v1/appbusiness/two/getNewRoute",{params:{ln:longitude,lo:latitude,address:address,id:that.annotation.id}}).then(res=>{
					if (res.data.success){
						console.log('abv'+res.data.result.bla)
						that.polyline[0].points=res.data.result.list
						that.marker[1].longitude= res.data.result.bla;
					    that.marker[1].latitude = res.data.result.blo;
						that.hackReset = false;
                        that.hackReset = true;
					}		   			
				}) 
			}
	    }
	}
</script>

<style>
</style>
